<template>
	<view>
		<view class="fixed-br" v-if="showTop" @click="toTop">
			<view id='top'>
				<image src="../../static/images/top.png" mode=""></image>
			</view>
		</view>

		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2">
							<image src="../../static/images/left_b.png" mode="widthFix" @click="Back()"></image>
						</view>
						<view class="placeholder">
							<input type="text" placeholder="搜索商品名称" v-model="keyword" @blur="blur" @focus="focus">
							<view class="close">
								<image src="../../static/images/close.png" mode="" v-if="keyword!==''"
									@click="keyword=''">
								</image>
							</view>
						</view>
						<view class="share-btn">
							<view class="app-header-item">
								<view class="ipt-img-box el-flex">
									<image src="../../static/images/search_b.png" mode="widthFix"
										@click="getSearchItem({title:keyword})"></image>
								</view>
							</view>
						</view>
					</view>

					<view class="app-nav">
						<view class="nav-main">
							<block v-for="(item,index) in tabList" :key="index">
								<view class="item" :class="tabIndex==index?'active':''" @click="changeTab(index)">
									{{item.name}}
									<template v-if="index==0">
										<view class="icon icon-down" :class="tabIndex==index?'active':''"></view>
									</template>
									<template v-if="index==2">
										<view class="icon-item">
											<view class="icon  icon-up " :class="isUp===0?'active':''"></view>
											<view class="icon icon-down" :class="isUp===1?'active':''"></view>
										</view>
									</template>
								</view>
							</block>
						</view>
						<view class="item-child" v-if="isShow">
							<view class="">
								<block v-for="(item,index) in itemChildList" :key="index">
									<view class=" item-child-item" @click="chooseItem(index)"
										:class="itemChildIndex==index?'active':''">
										{{item}}
										<view></view>
									</view>
								</block>
							</view>
						</view>
					</view>

					<template v-if="searchList.length!==0&&isShowList">
						<view class="search-key-list">
							<block v-for="(item,index) in searchList" :key="index">
								<view class="li" @click="getSearchItem(item)">
									<view class="li-item">
										<text>{{item.title}}</text>
									</view>
								</view>
							</block>
						</view>
					</template>
				</view>
			</view>
		</view>


		<view class="page-box">
			<view class="page-wrap">
				<view class="app-goods-con">
					<view class="list-con">
						<view class="app-goods-list">
							<view class="app-goods-classify">
								<view class="classify-box">
									<block v-for="(item,index) in classes" :key="index">
										<view class="classify-item">
											<view class="">
												<image :src="item.class_icon" mode=""></image>
												<text>{{item.class_name}}</text>
											</view>
										</view>
									</block>
								</view>
							</view>
							<view class="item-box">
								<block v-for="(item,index) in dataList" :key="index">
									<view class="item bd-bottom-1px" @click="toGoodDetail(item)">
										<image class="img" :src="item.body.image" mode=""></image>
										<view class="item-con">
											<view class="h3">
												{{item.body.name}}
											</view>
											<mpHtml :content="item.body.desc"></mpHtml>
											<view class="item-specs-list">
												<template
													v-if="item.body.class_parameters&&item.body.class_parameters.list">
													<block v-for="(i,j) in item.body.class_parameters.list" :key="j">
														<view class="specs-item bd-right-1px">
															<view class="name">
																{{i.top_title}}
															</view>
															<view class="desc">
																{{i.bottom_title}}
															</view>
														</view>
													</block>
												</template>
											</view>
											<view class="item-price">
												<text class="sub">¥</text>{{item.body.price}} <text class="spe"
													v-if="item.body.is_multi_price">起</text>
												<view class="icon-box"
													v-if="item.body.sale_label&&item.body.sale_label.activity_label">
													<block v-for='(img,imgIndex) in item.body.sale_label.activity_label'
														:key="imgIndex">
														<image :src="img.img_url" mode="heightFix"></image>
													</block>
												</view>
											</view>
											<view class="item-count">
												<text>{{item.body.comments_total}}条评价</text>
												<text>&nbsp;{{item.body.satisfy_per}}满意</text>
											</view>
										</view>
									</view>

								</block>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="isLoadAll">
			<view class="recommend-box space-top">
				<view class="recommend-top-img">
					<image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
						mode="">
					</image>
				</view>
				<view class="recommend-list el-flex">
					<block v-for="(item,index) in recom_list" :key="index">
						<view class="goods-item" @click="getCellItem(item)">
							<view class="goods-img-box">
								<image :src="item.image_url" mode=""></image>
							</view>
							<view class="goods-info">
								<view class="goods-name no-wrap">
									{{item.name}}
								</view>
								<view class="goods-price price">
									<text class="cur">￥</text><text>{{item.price}}</text>
									<text class="del" v-if="item.price!=item.market_price">￥{{item.market_price}}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				isShowList: false,
				searchList: [],
				main_sort: 0,
				isUp: '',
				itemChildIndex: 0,
				itemChildList: ['综合排序', '新品优先'],
				tabIndex: 0,
				isShow: false,
				showTop: false,
				scrollTop: 0,
				keyword: '',
				classes: [],
				dataList: [],
				page_index: 0,
				total: 0,
				isLoadAll: false,
				recom_list: [],
				tabList: [{
						name: '综合'
					},
					{
						name: '销量'
					},
					{
						name: '价格'
					},
					{
						name: '筛选'
					},
				]
			};
		},
		onReachBottom() {
			if (!this.isLoadAll) {
				this.page_index++
				this.getSearchItemData(true, this.main_sort)
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		watch: {
			keyword(newVal) {
				if (newVal == '') return;
				this.getSearchSuggestion(newVal)
			},
			scrollTop: {
				handler(newVal) {
					if (newVal >= 700) {
						this.showTop = true
					} else {
						this.showTop = false
					}
				},
				immediate: true
			},
			main_sort(newVal) {
				if (this.main_sort == 2) return;
				this.getSearchItemData(false, newVal)
			},
		},
		methods: {
			Back() {
				uni.navigateBack(-1)
			},
			focus() {
				this.isShowList = true
			},
			blur() {
				setTimeout(() => {
					this.isShowList = false
				}, 100)
			},
			getSearchSuggestion(query) {
				this.$request.get('/getSearchSuggestion', {
					query: query
				}).then((res) => {
					if (res.data.data) {
						this.searchList = res.data.data.list
					} else {
						this.searchList = []
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getSearchItem(item) {
				if (item.title == '' || item.title == this.keyword) return;
				uni.navigateTo({
					url: `/secPage/searchItemDetail/searchItemDetail?key=${item.title}`
				})
			},
			changeTab(index) {
				if (index == 0) {
					this.isShow = !this.isShow
					this.isUp = ''
				} else if (index == 2) {
					this.tabIndex = index
					this.itemChildIndex = 3
					this.main_sort = 2
					if (this.isUp === '' || this.isUp === 1) {
						this.isUp = 0
						// this.sort_by = 'asc'
						this.getSearchItemData(false, 2, 'asc')
					} else {
						this.isUp = 1
						// this.sort_by = 'dsc'
						this.getSearchItemData(false, 2, 'dsc')
					}
				} else if (index == 1) {
					this.tabIndex = index
					this.main_sort = 1
					this.isUp = ''
					this.itemChildIndex = 3
				} else {
					return
				}
			},
			chooseItem(index) {
				this.itemChildIndex = index
				this.tabIndex = 0
				this.isShow = !this.isShow
				if (index == 0) {
					this.main_sort = 0
				} else {
					this.main_sort = 4
				}
			},
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			toGoodDetail(item) {
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${item.body.product_id}`
				})
			},
			getCellItem(item) {
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`
					})
				}
			},
			getRecommendBlank() {
				this.$request.get('/getRecommendBlank').then((res) => {
					this.recom_list = res.data.data.recom_list
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getSearchItemData(flag, main_sort, sort_by) {
				this.$request.get('/getSearchItemData', {
					query: this.keyword,
					page_index: this.page_index,
					main_sort: main_sort,
					sort_by: sort_by
				}).then((res) => {
					this.total = res.data.data.total
					this.classes = res.data.data.classes
					if (res.data.data.list_v2.length == 0) {
						this.isLoadAll = true
					}
					if (flag) {
						this.dataList = this.dataList.concat(res.data.data.list_v2)
					} else {
						this.dataList = res.data.data.list_v2
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {

			this.keyword = e.key
			this.getSearchItemData(false, this.main_sort)
			this.getRecommendBlank()
		},

	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
	}

	.header-comp {
		position: relative;
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		z-index: 999;

		.header {
			position: fixed;
			top: 0;
			width: 7.2rem;
			z-index: 99;
		}

		.zw {
			height: var(--status-bar-height);
		}

		.status-bar {
			position: sticky;
			top: 0;
			background-color: white;
			width: 7.2rem;
		}

		.header-bar {
			position: relative;
			background: #fafafa;
		}
	}

	.search-key-list {
		text-align: left;

		position: absolute;
		margin-top: -0.8rem;
		// top: -0.8rem;
		z-index: 99;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .5);

		.li {
			background: #fff;

			.li-item {
				border-bottom: 1px solid rgba(0, 0, 0, .15);
				margin: 0 0.32rem;
				display: flex;
				height: 0.95rem;

				text {
					display: inline-block;
					width: 100%;
					overflow: hidden;
					height: 0.95rem;
					font-size: .28rem;
					line-height: .95rem;
					white-space: nowrap;
					color: #333;
				}
			}
		}
	}

	.header {
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		height: 0.8rem;
		background: #f2f2f2;
		z-index: 99;
		line-height: 1.15;

		view {
			line-height: 1.15;
		}

		.fill-height {
			height: .8rem;
			display: flex;
			align-items: center;
			flex: 1 1 auto;
			flex-wrap: nowrap;

			.header-btn2 {
				display: block;
				margin: 0 0.2rem;
				color: #666;
				margin-top: .03rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.share-btn {
				display: flex;
				align-items: center;

				.app-header-item {
					display: block;
					width: 0.6rem;
					margin: 0 0.2rem;

					.ipt-img-box {
						width: 0.6rem;
						height: 0.6rem;

						image {
							display: block;
							width: 0.6rem;
							height: 0.6rem;
						}
					}
				}

			}

			.placeholder {
				flex: 1;
				font-size: .3rem;
				position: relative;

				input {
					border: 1px solid #e5e5e5;
					border-radius: 0.04rem;
					padding: 0 0.5rem 0 0.2rem;
					outline: 0;
					font-size: .3rem;
					font-weight: 400;
					height: 0.5rem;
					background: white;
					line-height: normal;
				}

				.close {
					position: absolute;
					right: 0.12rem;
					top: 50%;
					transform: translateY(-50%);
					width: 0.27rem;
					height: .27rem;

					image {
						width: 100%;
						height: 100%;

					}
				}
			}
		}
	}

	.app-nav {
		width: 100%;
		position: relative;
		z-index: 98;
		background: #fafafa;

		.nav-main {
			background: #fafafa;
			height: 0.72rem;
			display: flex;
			align-items: center;
			font-size: .28rem;
			line-height: .72rem;
			width: 100%;
			z-index: 4;

			.item {
				font-size: .28rem;
				line-height: .72rem;
				text-align: center;
				color: rgba(0, 0, 0, .54);
				flex: 1;
				position: relative;
				display: inline-block;

				.icon-down {
					border-width: 0.08rem 0.08rem 0;
					border-color: #bdbdbd transparent transparent;
				}

				.icon {
					width: 0;
					height: 0;
					border-style: solid;
					display: inline-block;
					margin-left: 0.1rem;
					vertical-align: middle;
				}

				.icon-item {
					display: inline-block;
					position: relative;
					margin-left: 0.1rem;

					.icon {
						position: absolute;
						left: 0;
						margin-left: 0;
					}

					.icon-up {
						top: -0.23rem;
					}

					.icon-up.active {
						border-color: transparent transparent #ff6700;
					}

					.icon-down.active {
						border-color: #ff6700 transparent transparent;
					}

					.icon-down {
						top: -0.06rem;
					}
				}

				.active {
					border-color: #ff6700 transparent transparent;
				}

				.icon-up {
					border-width: 0 0.08rem 0.08rem;
					border-color: transparent transparent #bdbdbd;
				}
			}

			.active {
				color: #ff6700;
			}
		}

		.item-child {
			position: absolute;
			background-color: #fff;
			width: 100%;
			font-size: .28rem;
			z-index: 3;

			view {
				font-size: .28rem;
			}


			.item-child-item {
				line-height: .96rem;
				text-align: left;
				display: block;
				margin: 0 0.32rem;
				color: rgba(0, 0, 0, .87);
				border-bottom: 1px solid rgba(0, 0, 0, .15);
			}

			.active {
				color: #ff6700;

				view {
					float: right;
					width: 0.36rem;
					height: 0.24rem;
					background: url(../../static/images/yes.png) 50% 0;
					background-size: cover;
					margin-top: 0.3rem;
				}
			}

		}
	}

	.page-box {
		margin-top: 1.52rem;
		z-index: 1;

		.page-wrap {
			position: relative;
			z-index: 1;
			width: 100%;
			overflow: auto;
			height: 100%;
			background: #fafafa;

			.app-goods-con {
				.list-con {
					.app-goods-list {

						.app-goods-classify {
							overflow-y: hidden;
							overflow-x: scroll;
							background: #f4f4f4;
							font-size: .24rem;
							white-space: nowrap;
							z-index: 2;
							padding: 0.2rem 0;
							text-align: left;
							width: 100%;
							transition: transform .3s;

							.classify-box {
								.classify-item {
									display: inline-block;
									background: #fff;
									padding-bottom: 0.1rem;
									width: 1.3rem;
									margin-left: 0.12rem;
									overflow-x: hidden;
									text-align: center;
									border-radius: 0.04rem;

									image {
										display: block;
										width: 1.28rem;
										height: 1.28rem;
									}

									text {
										display: inline-block;
										font-size: .22rem;
									}
								}
							}
						}

						.item-box {
							.item {
								display: flex;
								padding: 0.28rem 0;
								padding-right: 0.28rem;
								min-height: 2.53rem;
								position: relative;
								background: #fff;

								.img {
									width: 2.53rem;
									height: 2.53rem;
									position: relative;
								}

								.item-con {
									display: block;
									text-align: left;
									width: 4.1rem;
									margin-left: 0.23rem;

									.h3 {
										font-size: .28rem;
										color: rgba(0, 0, 0, .87);
										line-height: .38rem;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
										font-weight: 400;
									}

									/deep/._block {
										line-height: 1.15;
									}

									.item-desc,
									/deep/._root {
										uni-text {
											font-size: .2rem !important;
											line-height: 1.15 !important;
										}

										font-size: .2rem !important;
										line-height: 1.15 !important;
										color: rgba(0, 0, 0, .54);
										margin-top: 0.05rem;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
									}

									.desc-color {
										color: '#ff4a00';
									}

									.item-specs-list {
										display: flex;
										align-items: center;
										margin: 0.15rem 0 0;

										.specs-item {
											flex: 1;
											position: relative;

											view {
												display: block;
												text-align: center;
											}

											.name {
												color: #4a4a4a;
												font-size: .22rem;
												line-height: .32rem;
											}

											.desc {
												color: rgba(0, 0, 0, .54);
												font-size: .2rem;
												line-height: .27rem;
												height: 0.27rem;
												overflow: hidden;
											}
										}

										.bd-right-1px {
											&:after {
												border-color: rgba(0, 0, 0, .15);
												height: 200%;
												border-right: 1px solid #d9d9d9;
												top: 0;
												right: 0;
												content: "";
												display: block;
												position: absolute;
												transform-origin: right 0;
												transform: scale(.5) translateZ(0);
											}
										}
									}

									.item-price {
										color: #ff6700;
										font-size: .36rem;
										line-height: 1;
										margin-top: 0.22rem;
										display: flex;

										.sub {
											font-size: .24rem;
											top: 0.8em;
											margin-right: 0.05rem;
										}

										.spe {
											font-size: .24rem;
											display: inline-block;
											line-height: .42rem;
										}

										.icon-box {
											display: inline-block;
											flex: 1;
											vertical-align: bottom;
											margin-top: -0.02rem;

											image {
												height: 0.25rem;
												line-height: 1;
												margin-left: 0.1rem;
												vertical-align: bottom;
												margin-top: -2px;
												object-fit: contain;
											}
										}
									}

									.item-count {
										margin-top: 0.1rem;

										text {
											color: rgba(0, 0, 0, .54);
											font-size: .2rem;
											margin-right: .1rem;
											line-height: .24rem;
										}
									}
								}
							}

							.bd-bottom-1px {
								&::after {
									content: '';
									display: block;
									position: absolute;
									border-color: rgba(0, 0, 0, .15);
									width: 200%;
									transform: scale(.5) translateZ(0);
									border-bottom: 1px solid #d9d9d9;
									left: 0;
									bottom: 0;
									transform-origin: 0 bottom;
								}
							}
						}
					}
				}
			}
		}
	}

	.recommend-box {
		background: #fff;
		text-align: left;

		.recommend-top-img {
			width: 7.2rem;

			image {
				width: 7.2rem;
				height: 1.2rem;
			}
		}

		.recommend-list {
			overflow: hidden;
			flex-wrap: wrap;
			justify-content: space-between;

			.goods-item {
				flex: 0 1 49.5%;
				overflow: hidden;

				.goods-img-box {
					position: relative;

					image {
						display: block;
						width: 100%;
						min-height: 3.56rem;
					}
				}

				.goods-info {
					padding: 0.18rem 0.26rem 0.22rem;

					.goods-name {
						font-size: .28rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.goods-price {
						font-size: .32rem;
						justify-content: flex-start;
						color: #ff6700;
						margin-top: 0.1rem;
						position: relative;
						line-height: 1em;

						.cur {
							font-size: .76em;
						}

						.del {
							font-size: .22rem;
							margin-left: 0.1rem;
							color: rgba(0, 0, 0, .54);
							text-decoration: line-through;
							position: relative;
							padding-left: 0.2em;
							line-height: 1em;
						}
					}
				}
			}
		}
	}
</style>